<!--我的记忆列表-->
<template>
    <el-row align="middle" :gutter="5">
        <el-col>
            <el-tag class="ml-2 itemb itemt" size="large" style="display: flex;">记忆列表</el-tag>
        </el-col>
    </el-row>

    <!--表格-->
    <audio style="display: none"  ref="radioRef"  controls></audio>
    
    <ul 
        v-infinite-scroll="load" 
        infinite-scroll-delay=1000
        infinite-scroll-immediate=false
        infinite-scroll-distance=5
        :infinite-scroll-disabled="!hasNext"
        class="infinite-list" 
        style="overflow: auto">

        <el-table 
        :data="tableData" 
        v-loading="loading"
        style="width: 100%" 
        empty-text="无数据，回首页记忆新单词"
        >
        <el-table-column label="单词" min-width="80" align="right" >
            <template #default="scope">
                <el-button type="" size="small" :icon="Search" @click="showDetail(scope.row, scope.$index)">{{scope.row.words.word}}</el-button>
            </template>
        </el-table-column>
        <el-table-column label="" width="50">
            <template #default="scope">
                <div @click="playAudio(scope.row.words.voiceUrl)">
                    <el-badge :hidden="!scope.row.forgot" value="忘记">
                    </el-badge>
                    <el-icon :size="25"><VideoPlay /></el-icon>
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="words.definition" label="释义"  min-width="100" />

        <el-table-column label="创建时间" width="120" align="center">
            <template  #default="scope">
                <span v-text="formatDate(scope.row.createTime)"></span>
                <el-progress :percentage="scope.row.totalReviewTimes ==0 ? 0 : (scope.row.reviewTimes*1.0/scope.row.totalReviewTimes)*100" color="#409eff" :show-text="false"/>
            </template>
        </el-table-column>
        <el-table-column  :label="'共 '+total" width="85" >
            <template #default="scope">
                <el-switch
                    :model-value="scope.row.status==='2'?'2':'0'"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66;"
                    active-value="2"
                    inactive-value="0"
                    active-text="完成"
                    inactive-text="否"
                />
            </template>
        </el-table-column>
    </el-table>
    </ul>

    

    <!--对话框-->
    <el-dialog v-model="dialogVisible" title="" class="dialogwidth">
        <el-row justify="space-between">
            <el-col :span="8">
                <p class="timep"><el-tag class="ml-2">创建记忆时间：{{ formatDate(progressDetail.createTime) }}</el-tag></p>
                <p class="timep"><el-tag class="ml-2">最后记忆时间：{{ formatDate(progressDetail.lastReviewTime) }}</el-tag></p>
                <p class="timep"><el-tag class="ml-2" type="warning">下次记忆时间：{{ formatDate(progressDetail.nextReviewTime) }}</el-tag></p>
            </el-col>
            <el-col :span="6">
                <el-progress type="circle" :percentage="progressDetail.totalReviewTimes ==0 ? 0 : ((progressDetail.reviewTimes*1.0/progressDetail.totalReviewTimes)*100).toFixed(0)" width="80"/>
            </el-col>
        </el-row>
        <el-divider style="margin: 5px;"/>

        <el-row align="middle">
            <el-col :span="18">
                <div class="container" @click="playAudio(progressDetail.words.voiceUrl)">
                    <el-icon :size="25"><VideoPlay /></el-icon>
                    <el-tag class="ml-2 tagfontsize" type="success">{{ progressDetail.words.wordShow }}</el-tag>
                </div>
            </el-col>
            <el-col :span="6">
                <el-button size="small" type="danger" @click="deleteProgress(progressDetail.id, progressDetail.index)">删除</el-button>
            </el-col>
        </el-row>
        <el-row>
            <p v-text="progressDetail.words.definition"></p>
        </el-row>
        <el-row>
            <h2>例句：</h2>
        </el-row>
        <el-row>
            <div v-html="progressDetail.words.exampleSentence"></div>
        </el-row>
    </el-dialog>

</template>

<script setup>
    import {ref, onMounted } from 'vue'
    import {progressList, progressDel} from '../apis/progress'
    import moment from 'moment'
    import { Search } from '@element-plus/icons-vue'

    const total = ref(0)
    const tableData = ref([]);
    const loading = ref(false);
    const progressDetail = ref({
        success: false,
        words: {
            wordShow: 'news[nju:z,nu:z]',
            voiceUrl: 'http://dictmp3.kekenet.com/mp3/45/b5a3de018630d08e99a83991dffdb2f3.mp3',
            definition: 'n. 母亲；大娘；女修道院院长 vt. 生下；养育；像母亲般关怀或照管 adj. 母亲的；出生地的',
            exampleSentence: '<p>fd</p><p>2323</p>'
        },
        nextReviewTime: '6月13日'
    });
    const dialogVisible = ref(false);

    const progressReq = {
        page: 1,
        size: 20,
    }
    
    function loadData() {
        loading.value = true;
        progressList(progressReq).then((res) => {
            // console.log(res);

            console.log('data size =' + tableData.value.length);
            
            if(res.data.progressList && res.data.progressList.length > 0) {
                for(let i = 0; i < res.data.progressList.length; i++) {
                    tableData.value.push(res.data.progressList[i]);
                }
            }
            total.value = res.data.total;
            hasNext.value = res.data.hasNext;

        }).finally(() => {
            loading.value = false;
        });
    }

    onMounted(()=> {
        loadData(); 
    });

    const hasNext = ref(true);
    const load = () => {
        console.log(loading.value)
        if(!loading.value && hasNext.value) {

            console.log('loading data')

            progressReq.page+=1;
            loadData();
        }
    }

    let radioRef = ref({});
    function playAudio(radioUrl) {
        let audio = radioRef.value;
        audio.src = radioUrl;

        if (audio.paused) {
            audio.play();
        } else {
            audio.pause();
        }
    }

    function formatDate(date) {
        return moment(date).format('YYYY-MM-DD');
    }


    function showDetail(row, index) {
        dialogVisible.value = true;
        progressDetail.value = row;
        progressDetail.value['index'] = index;
    }

    function deleteProgress(id, index) {
        
        ElMessageBox.confirm(
            '删除记忆不可恢复，请确认？',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            let delReq = {progressId: id};
            progressDel(delReq).then((res) => {
                // console.log(res);
                dialogVisible.value = false;
                tableData.value.splice(index, 1);
               
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            });

        }).catch(() => {
            // ElMessage({
            //     type: 'info',
            //     message: 'Delete canceled',
            // })
        });
    }

</script>

<style>
    .timep {
        padding: 0;
        margin: 0;
        margin-bottom: 2px;
    }
    .itemb {
        margin-bottom: 2px;
    }
    .itemt {
        margin-top: 5px;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    .textright {
        text-align: right;
    }
    .textcenter {
        text-align: center;
    }
    .wtips {
        display: flex; 
        align-items: center;
        margin-left: 5px;
    }
    .inputcolor {
        color: #de1414
    }
    .tagfontsize {
        font-size: 1.1em;
    }
    .infinite-list {
        height: 650px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    @media screen and (min-width: 320px) {
        .dialogwidth {
            width: 85%;
        }
    }

    @media screen and (min-width: 600px) {
        .dialogwidth {
            width: 50%;
        }
    }
</style>